import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'

import Taro, { Component, Config } from '@tarojs/taro'

import { AtList, AtListItem, AtToast } from 'taro-ui'

import { View, Image, Text } from '@tarojs/components'

import YContentPadded from '../../components/YContentPadded'
import YTableDivider from '../../components/YTableDivider'

import CLoverIcon from '../../assets/cloverActive@2x.png'

import { queryIntegrals } from '../../actions/goods'

import './Integrals.scss'

type PageStateProps = {
  goods: object | {},
}

type PageDispatchProps = {
  fetchIntegrals: (object) => void
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface GoodsIntegrals {
  props: IProps
}

@connect(({ goods }) => ({
  goods
}), (dispatch) => ({
  fetchIntegrals(params, callback) {
    dispatch(queryIntegrals(params, callback))
  }
}))
class GoodsIntegrals extends Component {
  config: Config = {
    navigationBarTitleText: '种草排行',
    enablePullDownRefresh: true,
    backgroundColor: '#ccc'
  }

  state = {
    isOpened: false
  }

  componentWillMount() {
    if(this.props.goods.profile.data) {
      console.log(this.props.goods.profile.data, this.props.goods.profile.data.id, 12331)
      this.props.fetchIntegrals({id: this.props.goods.profile.data.id}, (msg) => {
        console.log(msg, 'fetchUsers')
      })      
    }
  }

  onClick = (msg) => {
    console.log(msg, 123)
  }

  onPullDownRefresh() {

    console.log('--------下拉刷新-------')
    Taro.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(() => {
      // complete
      Taro.hideNavigationBarLoading() //完成停止加载
      Taro.stopPullDownRefresh() //停止下拉刷新
    }, 2000)

  }

  onReachBottom() {

    this.setState(state => ({
      ...state,
      isOpened: true
    }))

    console.log('--------上拉刷新-------')
    setTimeout(() => {
      Taro.stopPullDownRefresh() //停止下拉刷新

      this.setState(state => ({
        ...state,
        isOpened: false
      }))

    }, 2000)

  }

  render() {
    console.log(this.props.goods.integrals, 123)

    return (
      <View className='GoodsUserProfile'>
        <AtToast
          isOpened={this.state.isOpened}
          text='加载中...'
          status='loading'
          hasMask={true}
        />
        {/*
          <YTableDivider title='奖品一：阳澄湖大闸蟹' />
          <View className='tableCell'>
            <View className='title'>
              <Text className='text'>我种下的幸运草</Text>
            </View>
            <View className='navigate'>
              <Image src={CLoverIcon} mode='widthFix' className='icon' />
              <Text className='text'>+56</Text>
            </View>
          </View>
        */}
        <YContentPadded>
          <AtList>
            {
              this.props.goods.integrals.data && this.props.goods.integrals.data.map((item) => (
                <AtListItem
                  key={item.id}
                  thumb={item.avatarUrl}
                  // extraThumb={item.avatarUrl}
                  // extraText={'+' + item.Integrals ? item.Integrals.length : 0}
                  note={item.updatedAt}
                  title={item.nickname}
                />   
              ))
            }
            {
              this.props.goods.integrals.data && this.props.goods.integrals.data.length === 0 &&
              <View style={{textAlign: 'center'}}><Text style={{fontSize: 32}}>暂无</Text></View>
            }
          </AtList>
        </YContentPadded>       
      </View>
    )
  }
}

export default GoodsIntegrals as ComponentClass<PageOwnProps, PageState>